<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="标题">
      <el-input v-model="form.title"></el-input>
    </el-form-item>

    <el-form-item label="栏目">
      <el-checkbox-group v-model="form.categories">
        <!-- 我们不仅仅需要一个中文
                我们的分类其实是有 名字 name, id
                我们的 lable 应该是我们分类的 id
        而将分类的名字作为内容渲染出来 使用 {{.name}}-->
        <!-- <el-checkbox label="id">name</el-checkbox> -->
        <!-- 我们需要使用 ajax 获取分类数据然后 遍历渲染出这些选项 -->
        <el-checkbox
          v-for="(item, index) in categoryList"
          :key="index"
          :label="item.id"
        >{{item.name}}</el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-form-item label="类型">
      <el-radio v-model="form.type" label="1">文章</el-radio>
      <el-radio v-model="form.type" label="2">视频</el-radio>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        // 对于新建的文章这里应该是控制,但是如果是编辑文章,就应该用ajax获取文章数据来填写这些内容
        title: "",
        // 这里是编辑的时候,用户选中的分类
        categories: [],
        type: 1
      },
      // 所有分类选择   这个是页面一加载就会全部全部显示出来,只是给用户去选择
      categoryList: []
    };
  },
  mounted() {
    // 获取分类数据渲染多选框
    this.$axios({
      url: "/category",
      method: "get"
    }).then(res => {
      const { data } = res.data;
      this.categoryList = data;
    });
  },
  methods: {
    onSubmit() {
      // 提交函数,还没有完整数据,打印一下数,确认操作是否正常
      console.log(this.form);
    }
  }
};
</script>

<style>
</style>